<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>线索池管理</span>
      </div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="线索ID">
          <el-input v-model="searchForm.id" placeholder="请输入线索ID" clearable size="small"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable size="small"></el-input>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="dateRange"
            size="small"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="渠道来源：">
          <el-select v-model="searchForm.channel" placeholder="请选择渠道来源" clearable size="small">
            <el-option label="线上活动" value="0"></el-option>
            <el-option label="推广介绍" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <el-table :data="pageData.data" style="width: 100%" border>
        <el-table-column prop="id" label="线索ID" width="80px"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="channel" label="渠道来源">
          <template slot-scope="scope">
            <span v-if="scope.row.channel==0">线上活动</span>
            <span v-if="scope.row.channel==1">推广介绍</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="status" label="状态" width="80px">
          <template slot-scope="scope">
            <span v-if="scope.row.status==3">回收</span>
            <span v-if="scope.row.status==4">伪线索</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"  width="240px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDetail(scope.row)">
              查看
            </el-button>
            <el-button size="mini" type="danger" @click="handleGain(scope.row)">
              捞取
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.totalCount">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //时间
      dateRange:[],
      //查询的数据模型
      searchForm: {
        //过滤条件
        id: null,
        phone: null,
        channel: null,
        beginTime: null,
        endTime: null,

        //分页条件
        pageNo: 1,
        pageSize: 5,
      },
      //分页数据模型
      pageData: {
        data: [], // 分页数据
        pageNo: 1, // 当前页
        pageSize: 5, // 一页的大小
        totalCount: 0, // 总数据量
        totalPageCount: 0, // 总页数
      },
    };
  },
  created() {
    this.doSearch();
  },
  methods: {
    //查询用户信息
    doSearch() {
       //获取开始时间和结束时间
      if (this.dateRange) {
        this.searchForm.beginTime = this.dateRange[0]
        this.searchForm.endTime = this.dateRange[1]
      }else{
        this.searchForm.beginTime =null;
        this.searchForm.endTime =null;
      }
      this.$axios.get("/api/tb/clue/pool", {params:this.searchForm})
        .then((res) => {
          if (res.data.code == 200) {
            this.pageData.pageNo = res.data.data.current;
            this.pageData.pageSize = res.data.data.size;
            this.pageData.totalCount = res.data.data.total;
            this.pageData.totalPageCount = res.data.data.pages;
            this.pageData.data = res.data.data.records;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变每页显示的条数
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.doSearch();
    },
    //改变当前的页码数
    handleCurrentChange(val) {
      this.searchForm.pageNo = val;
      this.doSearch();
    },
    // 查看
    handleDetail (row) {
      this.$router.push('/clue/details?id='+row.id)
    },
    //捞取
    handleGain(row) {
        this.$confirm('确定要捞取吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //1.发送ajax请求
          this.$axios.put("/api/tb/clue/gainClue/"+row.id).then((res)=>{
              if (res.data.code == 200) {
                //1.友好提示
                this.$message.success(res.data.msg);
                //2.刷新表格
                this.doSearch();
              } else {
                //1.友好提示
                this.$message.error(res.data.msg);
              }
          }).catch((err)=>{
              console.log(err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消捞取'
          });          
        });
    },
  },
}
</script>

<style scoped>
</style>

